<!--
 * @Author: yuanming
 * @Date: 2023-12-05 09:31:33
 * @LastEditors: yuanming
 * @LastEditTime: 2024-09-09 16:21:55
 * @Description: fileDescription
-->
<template>
    <div class="emptyWarp">
        <img src="@/assets/images/empty.png" alt="">
        <p class="shining">暂无数据</p>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            handleTimer: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setAnimation()
        })
    },
    activated() {
        this.setAnimation()
    },
    deactivated() {
        this.clear()
    },
    methods: {
        setAnimation() {
            this.requestInterval(() => {
                if (this.handleTimer) {
                    const bubbleSizes = [3, 6, 9, 12]
                    const bubbleText = document.querySelectorAll('.shining')
                    if (bubbleText && bubbleText.length > 0) {
                        for (let i = 0; i < bubbleText.length; i += 1) {
                            const bubblePositions = Array.from(Array(bubbleText[i].offsetWidth).keys())
                            const bubbleSize = this.sample(bubbleSizes)
                            const bubblePosition = this.sample(bubblePositions)
                            const bubble = document.createElement('div')
                            bubble.className = 'bubble'
                            bubble.style.width = `${bubbleSize}px`
                            bubble.style.height = `${bubbleSize}px`
                            bubble.style.left = `${bubblePosition}px`
                            bubbleText[i].append(bubble)
                            const bubbleAnimation = bubble.animate([
                                { bottom: '10px', opacity: 0.5 },
                                { bottom: '180%', opacity: 0 },
                            ], {
                                fill: 'forwards',
                                duration: 3000,
                            })
                            bubbleAnimation.onfinish = () => bubble.remove()
                        }
                    }
                }
            }, 300)
        },
        clear() {
            this.handleTimer && this.handleTimer.value && cancelAnimationFrame(this.handleTimer.value)
            this.handleTimer = null
        },
        sample(arr) {
            return arr[Math.floor(Math.random() * arr.length)]
        },
        requestInterval(fn, delay) {
            let start = new Date().getTime()
            const handle = { value: 0 }
            const loop = () => {
                handle.value = requestAnimationFrame(loop)
                const current = new Date().getTime()
                const delta = current - start
                if (delta >= delay) {
                    fn()
                    start = new Date().getTime()
                }
            }
            handle.value = requestAnimationFrame(loop)
            this.handleTimer = handle
            return handle
        },
    },
}
</script>
<style lang="scss">
.bubble {
    position: absolute;
    background: rgba(50, 174, 216, 1);
    border-radius: 100%;
}
</style>
<style lang="scss" scoped>
.emptyWarp {
    width: 100%;
    height: 100%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw;
    img {
        width: 80%;
        height: auto;
    }
    .shining {
        position: relative;
        z-index: 2;
        display: inline-block;
        color: rgb(50, 174, 216);
        font-size: 1.5rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 5px;
    }
}
</style>
